<template>
  <div>
    <div class="content">
      <div class="left">
        <!-- teb栏  -->
        <el-tabs v-model="activeName">
          <el-tab-pane label="优秀博客" name="first">
            <ul class="article">
              <li v-for="(item, uid) in artic" :key="uid">
                <div class="excellentBlog" style="overflow: hidden">
                  <span style="float: left; font-size: 20px; font-weight: 500"
                    ><el-button
                      >{{ item.startTime }} 至 {{ item.endTime }}</el-button
                    ></span
                  ><span style="float: right">
                    <el-button
                      @click="deleteExcellentBlog(item.article_id)"
                      type="danger"
                      size="small"
                      icon="el-icon-delete"
                      circle
                    ></el-button
                  ></span>
                </div>
                <!-- 文章标题 -->
                <div class="title">{{ item.article_title }}</div>
                <!-- 文章摘要 -->
                <div class="abstract">{{ item.article_summary }}</div>
                <!-- 阅读,评论,点赞 -->
                <div class="out-box">
                  <div class="box-left">
                    <span class="reading">{{ item.article_view_count }} </span>
                    <span class="praise">{{ item.article_like_count }} </span>
                    <span class="comments">{{
                      item.article_comment_count
                    }}</span>
                  </div>
                  <div class="box-right">
                    <!-- 用户昵称 -->
                    <span class="user">{{ item.username }}</span>
                    <!-- 发布时间 -->
                    <span class="data">{{
                      timeDetal(item.article_createtime)
                    }}</span>
                    <span @click="artic_Derails(item.article_id)">浏览</span>
                  </div>
                </div>
              </li>
            </ul>
            <el-empty description="没有搜到哟宝~" v-if="blognum"></el-empty>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { mixin } from "../../mixin";
export default {
  name: "ExcellentBlogsList",
  mixins: [mixin],
  data() {
    return {
      dayTime: "", //今日时间
      blognum: false, //为空时显示空状态
      page_hide: true, //页面空状态时隐藏
      artic: [], // 博客数据
      activeName: "first", //导航栏默认先展示博客信息
      starBlogList: {}, //博客之星
     
    };
  },
  
  methods: {
    // 删除评选出的优秀博客
    deleteExcellentBlog(value) {
      console.log(value);

      const h = this.$createElement;
      this.$msgbox({
        //弹框element写法
        title: "消息",
        message: h("p", null, [h("span", null, "确定删除此篇优秀博客 ")]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            this.$http({
              method: "post",
              url: "jurisdiction/removeGoodBlog",
              params: {
                article_id: value,
              },
            }).then(({ data }) => {
              console.log("页面渲染", data);
              // 提示信息
              if (data.flag) {
                this.$message({
                  type: "info",
                  message: "删除成功",
                });
              } else {
                this.$message({
                  type: "info",
                  message: "删除失败",
                });
              }
            });

            //弹框element写法
            // 点击确定之后500毫秒消失
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 500);
          } else {
            done();
          }
        },
      }).then(() => {
        // 重新渲染页面
        this.PageRendering();
      });
    },

    // 获取博客id,转入查看博客详情
    artic_Derails(id) {
      this.$router.push({
        name: "BlogDetails",
        query: {
          itemid: id,
        },
      });
    },

    // 页面渲染
    PageRendering() {
      this.$http({
        method: "post",
        url: "jurisdiction/showGoodBlog",
      }).then(({ data }) => {
        console.log("页面渲染", data);
        this.artic = [];
        this.artic = data.data.article;
        // 将用户名时间传到artic中
        for (var i = 0; i < this.artic.length; i++) {
          this.$set(this.artic[i], "username", data.data.user[i].username);
          this.$set(this.artic[i], "startTime", data.data.startTime[i]);
          this.$set(this.artic[i], "endTime", data.data.endTime[i]);
        }
      });
    },
  },

  mounted() {
    
    this.PageRendering();
  },
};
</script>


<style scoped>
/* 内容展示区 */
.content {
  display: flex;
  width: 800px;
  box-sizing: border-box;
  margin: 20px auto;
  padding-bottom: 20px;
}
/* 左边搜索内容 */
.left {
  flex: 7;
  padding: 30px;
  margin-top: 50px;
  margin-right: 20px;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
}
.left /deep/.el-tabs__item {
  font-size: 20px;
}
.left /deep/ .el-tabs__active-bar {
  width: 40px;
}
.left .article li {
  cursor: pointer;
  border-bottom: 1px solid rgb(240, 239, 239);
  margin: 10px 0 20px 0;
}
.left .article .title {
  font-size: 25px;
  font-weight: 700;
  /* margin-bottom: 10px; */
}
.left .article .abstract {
  font-size: 16px;
  color: #aaaaaa;
  margin: 15px 0;
}
.reading,
.praise,
.comments,
.user,
.data {
  color: #aaaaaa;
  display: inline-block;
  margin: 0 40px 0px 0;
  font-size: 18px;
}
.reading::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e62b";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 20px;
}
.praise::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\ec7f";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 20px;
}
.comments::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e8b9";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 18px;
}
.out-box {
  height: 30px;
  position: relative;
}
.box-left {
  position: absolute;
  left: 0;
}
.box-right {
  position: absolute;
  right: 0;
}
/* 分页位置 */
.el-pagination {
  text-align: center;
}
.left /deep/ .el-pagination.is-background .el-pager li,
.left /deep/ .el-pagination.is-background .btn-prev,
.left /deep/ .el-pagination.is-background .btn-next {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
}
</style>